<template>
  <div>
    <ol class="breadcrumb-nav">
			<li>
				<a href="/admin.html">主页</a>
			</li>
			<li>
				<a v-link="{path:'/bannerList'}">banner列表</a>
			</li>
			<li>添加轮播图</li>
		</ol>
    <form class="x-ui-form form pd-20">
      <!--title-->
			<div class="row cl">
				<label class="form-label col-2">标题</label>
				<div class="col-10">
					<input type="text" v-model="banner.title" class="input-text"/>
				</div>
			</div>
      <!--图片-->
			<div class="row cl">
				<label class="form-label col-2">banner图片</label>
				<div class="col-10">
					<input type="text" v-model="banner.img" class="input-text"/>
				</div>
			</div>
      <!--链接-->
      <div class="row cl">
        <label class="form-label col-2">banner链接</label>
        <div class="col-10">
  				<input type="text" v-model="banner.href" class="input-text"/>
        </div>
      </div>
      <!--排序-->
			<div class="row cl">
				<label class="form-label col-2">栏目排序</label>
				<div class="col-10">
					<input type="text" v-model="banner.sort" class="input-text"/>
				</div>
			</div>
      <!--提交-->
      <div @click="submit" class="btn btn-submit">提交</div>
    </form>
  </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return {
        banner:{},
        msg:""
      }
    },
    route:{
      data(transition){
        var th = this;
        if(transition.to.query.id){
          th.msg = "编辑成功";
          th.$http.get("/getBanner" , {id:transition.to.query.id} , function(res){
            transition.next({banner:res.banner[0]});
          },"JSON");
        }else{
          th.msg = "添加成功";
        };
      }
    },
    methods:{
      submit(){
        var th = this,
            data = this.banner;
        if(!data.img){
          return alert("请选择图片");
        };
        th.$http.post("/addBanner" , data , function(res){
          if(res.state == "ok"){
            alert(th.msg);
            th.$route.router.go("/bannerList")
          }else{
            alert(res.message);
          };
        },"JSON");
      }
    }
  }
</script>
